<template src="./address.html"></template>

<script>
import pca from "../../../static/address/pca.json";
export default {
  name: "TianDingAddressComponent",
  props: ["values"],
  data() {
    return {
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 0,
          values: Object.keys(pca),//省
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          defaultIndex: 0,
          values: ["市辖区"],//市
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          defaultIndex: 0,
          values: ["东城区"],//县
          className: "slot5",
          textAlign: "center"
        }
      ],
      myAddressProvince: "省",
      myAddressCity: "市",
      myAddresscounty: "区/县"
    };
  },
  mounted() {
    this.$nextTick(() => {
      //vue里面全部加载好了再执行的函数   （类似于setTimeout）
      this.myAddressSlots[0].defaultIndex = 0;
      this.myAddressSlots[2].values = Object.keys(pca["北京市"]);
      this.myAddressSlots[4].values = pca["北京市"]["市辖区"];
      if (this.values.length > 0) {
        this.myAddressSlots[0].defaultIndex = Object.keys(pca).findIndex(
          i => i === this.values[0]
        );
        this.myAddressSlots[2].defaultIndex = Object.keys(
          pca[this.values[0]]
        ).findIndex(i => i === this.values[1]);
        this.myAddressSlots[4].defaultIndex = pca[this.values[0]][
          this.values[1]
        ].findIndex(i => i === this.values[2]);
      }
    });
  },
  methods: {
    onMyAddressChange(picker, values) {
      if (pca[values[0]]) {
        picker.setSlotValues(1, Object.keys(pca[values[0]]));
        picker.setSlotValues(2, pca[values[0]][values[1]]);
        this.myAddressProvince = values[0];
        this.myAddressCity = values[1];
        this.myAddresscounty = values[2];
        this.$emit("change", [
          this.myAddressProvince,
          this.myAddressCity,
          this.myAddresscounty
        ]);
      }
    }
  }
};
</script>
